<template>
  <div class="upload_article">
    <form action="JavaScript:;" method="post">
      <div class="title_nav">
          <h3 style="color:gray">上传文章</h3>
        <div>
          <input type="button" value="发布" @click="commit">
          <input type="button" value="返回" @click="$router.go(-1)">
        </div>
      </div>
      <div class="content">
        <label for="title" class="biaoti">
          <span>
            <svg class='icon' aria-hidden='true'>
              <use xlink:href='#icon-fabiaopinglun'></use>
            </svg>
            文章标题：</span>
          <input type="text" name="title" id="title" v-model="title">
        </label>
        <div class="tag">
          <div class="tag_title">
            <span>
              <svg class='icon' aria-hidden='true'>
                <use xlink:href='#icon-biaoqian'></use>
              </svg>
              添加标签：</span>
            <input type="text" class="tag_text" maxlength="10" v-model="tag.val"> 
            <input type="button" value="添加" class="tag_btn" @click="addTag">
            <span class="tag_err">{{tag.err}}</span>
          </div>
          <div class="tag_list">
            <transition-group name="left_fade" appear tag="ul">
              <li v-for="(item,index) in tag.tag_list" :key="index+'a'">
                <p @click="removeTag(index)">×</p>
                <span>
                  <svg class='icon' aria-hidden='true'>
                    <use xlink:href='#icon-biaoqian'></use>
                  </svg>
                  {{item}}</span>
              </li>
            </transition-group>
          </div>
        </div>
        <editor-bar v-model="detail" :isClear="isClear" class="detail"></editor-bar>
      </div>
    </form>
    <iframe v-if="articleSrc" ref="myArticle" :src="articleSrc" frameborder="0" @load="changeArticle" style="display:none"></iframe>
  </div>
</template>

<script>
import { mapActions } from 'vuex';
import EditorBar from './editor.vue'
export default {
  name: 'UploadArticle',

  data() {
    return {
      isClear: false, // 是否清空文本
      detail:"", // 文章内容
      title: '', // 标题
      tag: { 
        tag_list:[], // 标签
        val: '', // 标签内容
        err:'' // 错误提示
      },
      articleSrc: '' // 判断是修改还是上传
    };
  },

  mounted() {
    this.init()
  },

  methods: {
    // 初始化
    init(){
      let article = this.$route.query
      if(Object.keys(article).length != 0){
        this.articleSrc = article.detail + '?t=' + Math.random()
        this.title = article.title
        this.tag.tag_list = article.tag ? article.tag.split(',') : [] 
      }
    },
    // 添加标签
    addTag(){
      let tag = this.tag
      let cn = tag.val.match(/[\u4E00-\u9FA5]/g)
      if(!tag.val){
        tag.err = '标签不能为空'
      }else if(cn && cn.length > 5){
        tag.err = '标签过长'
      }else if(tag.tag_list.indexOf(tag.val) != -1){
        tag.err = '标签已存在'
      }else if(tag.tag_list.length >= 5){
        tag.err = '最多设置5个标签'
      }else{
        tag.tag_list.push(tag.val)
        tag.err = ''
        tag.val = ''
      }
    },
    // 删除标签
    removeTag(i){
      this.tag.tag_list.splice(i,1)
    },
    // 上传文章
    commit(){
      if(confirm('是否确认上传?')){
        if(!this.$store.state.userinfo.name && !this.$store.state.userinfo.birthday){
          this.showHint({title: '请完善个人信息!',isFlag: false})
          this.$router.push('/User/info')
        }
        else if(this.detail.length >= 1024000 * 20){
          this.showHint({title: '文章大小不能超过20M,请合理控制图片大小!',isFlag: false})
        }
        else if(this.detail.trim() && this.title.trim()){
          let data = {
            title: this.title,
            detail: this.detail,
            tag: this.tag.tag_list.toString(),
            id: Object.keys(this.$route.query).length != 0 ? this.$route.query.articleid : ''
          }
          if(data.id){
            this.$api.changeArticle(data).then(res => {
              if(res == 1){
                this.showHint({title:'上传成功',isFlag:true})
                this.$router.push('/User/article')
              }
            })
          }else{    
            this.$api.uploadArticle(data).then(res => {
              if(res == 1){
                this.showHint({title:'上传成功',isFlag:true})
                this.$router.push('/User/article')
              }else{
                this.showHint({title:'上传失败,请稍后重试!',isFlag:false})
              }
            })
          }
        }
        else
          this.showHint({title: '标题和内容不能为空!',isFlag: false})
      }
    },
    // 加载修改文章内容
    changeArticle(){
      this.detail = this.$refs.myArticle.contentDocument.body.innerHTML
    },
    ...mapActions(['showHint'])
  },

  components: {
    EditorBar
  }
};
</script>

<style scoped>
.upload_article{
  padding: 60px;
  height: 100vh;
  overflow-y: scroll;
}
.content{
  margin: 20px 0;
  display: flex;
  flex-direction: column;
}
.tag{
  margin: 20px 0 10px 0;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-items: center;
}
.tag .tag_title{
  display: flex;
  align-items: center;
}
.tag .tag_title span{
  display: block;
  white-space: nowrap;
}
.tag .tag_text{
  width: 80px;
  height: 30px;
  padding-left: 10px;
  margin-left: 10px;
  outline: none;
}
.tag .tag_err{
  color: red;
  width: 180px;
}
.tag .tag_btn{
  padding: 5px 10px;
  margin: 0 10px;
  cursor: pointer;
}
.tag_list{
  width: 100%;
  margin-top: 10px;
}
.tag_list ul{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-top: -5px;
}
.tag_list li{
  height: 30px;
  line-height: 30px;
  padding: 0 5px;
  border: 1px solid gray;
  margin: 10px;
  text-align: center;
  position: relative;
  background-color: #ececec;
  color: gray;
  border-radius: 4px;
  cursor: pointer;
}
.tag_list li:hover p{
  display: block;
}
.tag_list li p{
  display: none;
  width: 18px;
  height: 18px;
  line-height: 15px;
  border-radius: 50%;
  font-size: 1rem;
  position: absolute;
  border: 1px solid gray;
  top: -9px;
  right: -9px;
  background-color: white;
  text-align: center;
  color: gray;
}
.tag_list li p:hover{
  background-color: red;
  opacity: .7;
  color: white;
}
@media screen and (max-width: 800px){
  .title_nav div{
    display: flex;
  }
  .upload_article{
    padding: 10px;
  }
}
</style>